<template>
	<div id="MessageCenter">

		<sticky ref="sticky" :check-sticky-support="false">
			<x-header :left-options="{showBack: false}" title="消息中心" class="header vux-1px-b">
				<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			</x-header>
		</sticky>
		<view-box ref="viewBox">
			<div class="wrapper">
				<div style="overflow: hidden;">
					<div class="infoWrap" v-for="item in newsList">
						<div class="timer">{{timer2time(item.notice_time)}}</div>
						<div class="content">
							<div class="title">
								<p>{{item.notice_title}}</p>
								<span>{{timer3time(item.notice_time)}}</span>
							</div>
							<div class="desc">
								<img :src="'/los' + item.goods_thumb" alt="" />
								<div class="rightBar">
									<p class="name">{{item.notice_content}}</p>
									<p class="price">截拍价<span>￥{{item.auction_bidprice}}</span></p>
								</div>
							</div>
							<!--<div class="news">
								<div class="sign">
									<h2>最新消息</h2>
									<span>8</span>
								</div>
								<div class="state">
									<div class="tip">
										<img src="../assets/images/home/icon_time_black.png" alt="" />
										<span>买家未付款</span>
									</div>
									<div class="notify">尊敬的【陈陈陈】,因为您未及时付款,到手的宝贝就这么跟您擦肩而过了,好物不常有,请您且拍且珍惜。</div>
								</div>
								<div class="time">05-17 10:08</div>
							</div>-->
						</div>
					</div>
					<!--<div class="infoWrap">
						<div class="timer">2018年5月17日</div>
						<div class="content">
							<div class="title">
								<p>【汝窑专场】皇家官窑 优柔如水</p>
								<span>10:08</span>
							</div>
							<div class="contentWrap">
								<img src="../assets/timg/p3.jpg" alt="" />
								<p class="add">共有12件拍品,件件通过了精挑细选</p>
								<div class="detail">
									<p>查看详情</p>
									<img src="../assets/images/home/icon_right.png" alt="" />
								</div>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</view-box>
		<loading :show="show1" :text="text"></loading>
	</div>
</template>

<script>
	import { XHeader, ViewBox, Loading, Sticky } from 'vux'
	import BScroll from 'better-scroll';
	import axios from 'axios';
	export default {
		data() {
			return {
				show1: false,
				text: '加载中',
				newsList: [],
				flag: true,
				notice_time: '',
				notice_times: ''
			}
		},
		activated() {
			this.getMessageInfo();
		},
		mounted() {
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		components: {
			XHeader,
			ViewBox,
			Loading,
			BScroll,
			Sticky
		},
		methods: {
			getMessageInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/notice_list.json',
					data: ''
				}).then((result) => {
					this.newsList = result.data.data;
					let scroll = new BScroll('.wrapper', {
						scrollY: true,
						eventPassthrough: 'horizontal',
					});
					let _this = this;
					let page = 1;
					scroll.on('touchEnd', function(position) {
						if(position.y < (this.maxScrollY - 20)) {
							_this.show1 = true;
							page += 1;
							console.log(position);
							setTimeout(function() {
								_this.reloadData(page);
								scroll.refresh();
								_this.show1 = false;
							}, 1000);
						}
					});
				}).catch((err) => {
					console.log(err);
				})
			},

			reloadData(page) {
				axios.get('/los/api/member/notice_list.json?page=' + page)
					.then((result) => {
						if(result.data.code == 0) {
							this.success = !this.success;
							this.msg = '数据加载完毕';
							this.flag = false;
						} else {
							this.flag = true;
							let data = result.data.data;
							for(let i = 0; i < data.length; i++) {
								this.newsList.push(data[i]);
							}
						}
					}).catch((err) => {
						console.log(err);
					})
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd");
			},
			//时分秒
			timer3time: function(time) {
				return new Date(parseInt(time) * 1000).Format("hh:mm:ss");
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	#MessageCenter {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.header {
		background: #fff;
	}
	
	.wrapper {
		height: 800px;
		overflow: hidden;
	}
	
	.infoWrap .timer,
	.info .timer {
		margin: 0.42rem auto 0;
		width: 2.64rem;
		height: 0.5rem;
		line-height: 0.52222rem;
		background: #ccc;
		color: #fff;
		text-align: center;
		font-size: 0.32rem;
		border-radius: 0.05rem;
	}
	
	.infoWrap .content {
		background: #fff;
		margin: 0.26rem;
	}
	
	.infoWrap .content .title {
		height: 1.17rem;
		line-height: 1.17rem;
		overflow: hidden;
		padding: 0 0.26rem;
	}
	
	.infoWrap .content .title p {
		float: left;
		color: #333;
		font-size: 0.4rem;
	}
	
	.infoWrap .content .title span {
		float: right;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.infoWrap .content .desc {
		overflow: hidden;
		position: relative;
		height: 2.5rem;
		padding: 0.26rem 0.26rem 0.26rem 0;
		margin-left: 0.26rem;
	}
	
	.infoWrap .content .desc:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.infoWrap .content .desc img {
		float: left;
		width: 1.97rem;
		height: 1.97rem;
		border-radius: 0.05rem;
	}
	
	.infoWrap .content .desc .rightBar {
		float: right;
		margin-left: 0.26rem;
		width: 6.73rem;
	}
	
	.infoWrap .content .desc .rightBar .name {
		margin-top: 0.1rem;
		line-height: 0.53rem;
		font-size: 0.34rem;
		color: #333;
	}
	
	.infoWrap .content .desc .rightBar .price {
		font-size: 0.32rem;
		color: #777;
		margin-top: 0.32rem;
	}
	
	.infoWrap .content .desc .rightBar .price span {
		font-size: 0.34rem;
		color: #da4240;
	}
	
	.infoWrap .content .news {
		padding: 0.4rem 0.26rem 0.4rem 0;
		position: relative;
		margin-left: 0.26rem;
		height: 3.86rem;
	}
	
	.infoWrap .content .news:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.infoWrap .content .news .sign {
		overflow: hidden;
	}
	
	.content .news .sign h2 {
		font-size: 0.37rem;
		color: #333;
		float: left;
	}
	
	.content .news .sign span {
		float: left;
		width: 0.32rem;
		height: 0.32rem;
		line-height: 0.32222rem;
		color: #fff;
		background: #da4240;
		text-align: center;
		padding-top: 0.04rem;
		margin: 0.1rem 0 0 0.1rem;
		display: inline-block;
	}
	
	.content .news .state {
		margin-top: 0.26rem;
	}
	
	.content .news .state .tip {
		overflow: hidden;
		margin-bottom: 0.26rem;
	}
	
	.content .news .state .tip img {
		float: left;
		width: 0.32rem;
		height: 0.32rem;
		margin-top: 0.05rem;
		display: inline-block;
	}
	
	.content .news .state .tip span {
		font-size: 0.34rem;
		color: #777;
		margin-left: 0.05rem;
	}
	
	.content .news .state .notify {
		margin-left: 0.56rem;
		color: #777;
		font-size: 0.34rem;
		line-height: 0.53rem;
	}
	
	.content .news .time {
		position: absolute;
		right: 0.4rem;
		bottom: 0.4rem;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.infoWrap .content .contentWrap {
		padding: 0 0.26rem;
	}
	
	.infoWrap .content .contentWrap img {
		width: 8.93rem;
		height: 4.85rem;
	}
	
	.infoWrap .content .contentWrap .add {
		line-height: 1.06rem;
		height: 1.06rem;
		font-size: 0.34rem;
		color: #777;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 5.06rem;
	}
	
	.infoWrap .content .contentWrap .detail {
		height: 1.06rem;
		overflow: hidden;
		line-height: 1.06rem;
		position: relative;
	}
	
	.infoWrap .content .contentWrap .detail:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.infoWrap .content .contentWrap .detail p {
		float: left;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.infoWrap .content .contentWrap .detail img {
		float: right;
		width: 0.34rem;
		height: 0.34rem;
		margin-top: 0.34rem;
	}
</style>
<style>
	#MessageCenter #vux_view_box_body {
		padding-bottom: 0;
	}
</style>